import * as React from 'react'
import {useHistory} from 'react-router-dom'
import {
    Table,
    Space,
} from 'antd';
import './style.scss'
import moment from 'moment'
import 'moment/locale/zh-cn'
export default (props:{
    data:Array<any>,
    rows:Array<number>,
    total:number,
    onChange?:(p:number,s:number)=>void,
    rowsChange?:()=>void,
    cate:Array<any>
})=>{
    const columns:Array<object> = [
        {
            title: '商品',
            dataIndex: 'name',
            key: 'name',
            align:'center',
            render: (text,row) => (
            <div className='img'>
                <img src={'http://localhost:8888'+row.img} alt="" />
                <div>{row.name}</div>
            </div>),
        },
        {
            title: '描述',
            dataIndex: 'desc',
            width:200,
            align: 'center',
            key: 'desc',
        },
        {
            title: '商品状况',
            dataIndex: 'status',
            width:200,
            align: 'center',
            key: 'status',
            render: (text, row) => (row.status ? '在线' : '已下架')
        },
        {
            title: '是否热销',
            dataIndex: 'hot',
            align: 'center',
            key: 'hot',
            render: (text, row) =>(row.hot?'是':'不是')
        },
        {
            title: '排名',
            dataIndex: 'rank',
            align: 'center',
            key: 'rank',
        },
        {
            title: '品类',
            dataIndex: 'cate',
            align: 'center',
            key: 'cate',
            width:200,
            render:(text,row)=>(cate.find(ele=>ele.cate===row.cate)?.cate_zh)
        }, 
        {
            title: '入库时间',
            dataIndex: 'create_time',
            align: 'center',
            key: 'create_time',
            render: (text, row) => (moment(row.create_time).format('MMM Do'))
        }, 
        {
            title: '操作',
            key: 'action',
            align:'center',
            render: (text, row) => (
                <Space size="middle">
                    <a onClick={() =>history.push('/good/edit/'+row._id)}>编辑</a>
                </Space>
            ),
        },
    ]
    let { 
        data, 
        rows,//被选中的行，是数组
        rowsChange,//当选中行发生变化时，向父组件通信
        total,//传过来的总条数
        onChange,//点击页数触发的事件，把页数传递过来
        cate
    }=props
    const history=useHistory()
    
    const rowSelection = {
        selectedRowKeys:rows,
        onChange: rowsChange,
    };
    return(
        <div className='qf-table'>
            <Table
                rowKey='_id'
                columns={columns}
                rowSelection={rowSelection}
                dataSource={data}
                showSizeChanger
                pagination={{
                    total,
                    pageSize: 2,
                    onChange
                }}
                showTotal={t => (<div>总共有{t}页</div>)}
            />
        </div>
    )
}